<template>
    <div class="region">
        <div class="content">
            <div class="left">地区:</div>
            <ul>
                <li :class="{ active: RegionFlag == '' }" @click="changeRegion('')">全部</li>
                <li v-for="item in RegionArr" :key="item.value" :class="{ active: RegionFlag == item.value }"
                    @click="changeRegion(item.value)">{{ item.name }}</li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { HospitalLevelAndRegionArr } from "@/api/home/type";
import { reqHospitalLevelAndRegion } from "@/api/home";
//地区高亮的响应式数据
let RegionFlag = ref<string>('')

let RegionArr = ref<HospitalLevelAndRegionArr>()

onMounted(() => {
    getRegion();
});

const getRegion = async () => {
    await reqHospitalLevelAndRegion('Beijin').then((res) => RegionArr.value = res.data)
}

const changeRegion = (region: string) => {
    RegionFlag.value = region;
    $emit('getRegion', region)
}

const $emit = defineEmits(['getRegion'])

</script>

<style lang="scss" scoped>
.region {
    color: #7f7f7f;
    margin-top: 20px;

    .content {
        display: flex;
        font-size: 14px;

        .left {
            margin-right: 10px;
            width: 10%;
            max-width: 40px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-right: 10px;
                margin-bottom: 10px;
                cursor: pointer;

                &.active {
                    color: #55a6fe;
                }
            }
            
            li:hover {
                color: #55a6fe;
            }
        }
    }
}
</style>